import React from "react";
import {ClsControl} from "../../block-control";
import {ControlBar} from "../../control-bar";
import {useAppDispatch, useAppSelector} from "../../../redux/hooks";
import {addEduInfoItem, getEduInfo} from "../../../redux";
import {REduExperienceItem} from "./r-edu-experience-Item";
import {MyIcon, SuTitle} from "../../su-title";
import { MedicineBoxOutlined } from "@ant-design/icons";

interface PropsType {

}

export const REduExperience: React.FC<PropsType> = ({}) => {
    const eduList = useAppSelector(getEduInfo);
    const dispatch = useAppDispatch();

    return <ClsControl canDrag={true} controlBar={
        <ControlBar
            style={{top: 0}}
            displayConfig={{ add: true }}
            onClickAdd={() => { dispatch(addEduInfoItem()) }}
        ></ControlBar>
    }>
        <SuTitle title='教育经历' icon={
            <MyIcon type={"jiaoyu"}></MyIcon>
        }></SuTitle>
        {
            eduList.map((eduInfo, index) =>
                <REduExperienceItem
                    key={index}
                    index={index}
                    value={eduInfo}
                ></REduExperienceItem>
            )
        }
    </ClsControl>
}
